import './china.js';
import { uniqBy } from 'lodash';
export default function ({
  data = [
    {
      fromName: '黑龙江',
      toName: '北京市',
      fromLngLat: [127.9688, 45.368],
      toLngLat: [116.4551, 40.2539],
      value: 10,
    },
    {
      fromName: '内蒙古',
      toName: '北京市',
      fromLngLat: [110.3467, 41.4899],
      toLngLat: [116.4551, 40.2539],
      value: 50,
    },
    {
      fromName: '吉林',
      toName: '北京市',
      fromLngLat: [125.8154, 44.2584],
      toLngLat: [116.4551, 40.2539],
      value: 80,
    },
    {
      fromName: '河北',
      toName: '北京市',
      fromLngLat: [114.4995, 38.1006],
      toLngLat: [116.4551, 40.2539],
      value: 135,
    },
  ],
} = {}) {
  let lines = [],
    effectScatter = [],
    scatter = [];
  data.forEach(v => {
    const { fromName, toName, fromLngLat, toLngLat, value } = v;
    lines.push([
      {
        name: fromName,
        coord: fromLngLat,
        value: value,
      },
      {
        name: toName,
        coord: toLngLat,
      },
    ]);
    effectScatter.push({
      name: fromName,
      value: [...fromLngLat, value],
    });
    scatter.push({
      name: toName,
      value: [...toLngLat, value],
    });
  });
  scatter = uniqBy(scatter, obj => obj.name);
  return {
    tooltip: {
      trigger: 'item',
      backgroundColor: 'rgba(166, 200, 76, 0.82)',
      borderColor: '#FFFFCC',
      showDelay: 0,
      hideDelay: 0,
      enterable: true,
      transitionDuration: 0,
      extraCssText: 'z-index:100',
      formatter: function (params) {
        const { marker, name, value } = params;
        return `${marker}${name}: ${value}`;
      },
    },
    backgroundColor: 'transparent',
    geo: {
      map: 'china',
      zoom: 1.2,
      label: {
        emphasis: {
          show: false,
        },
      },
      roam: true, //是否允许缩放
      itemStyle: {
        color: 'rgba(4, 84, 109, .5)', //地图背景色
        borderColor: '#30c7e4', //省市边界线00fcff 516a89
        borderWidth: 1,
        emphasis: {
          color: 'rgba(37, 43, 61, .5)', //悬浮背景
        },
      },
    },
    series: [
      {
        type: 'lines',
        zlevel: 2,
        effect: {
          show: true,
          period: 4, //箭头指向速度，值越小速度越快
          trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
          symbol: 'arrow', //箭头图标
          symbolSize: 5, //图标大小
        },
        lineStyle: {
          width: 1, //尾迹线条宽度
          opacity: 1, //尾迹线条透明度
          curveness: 0.3, //尾迹线条曲直度
          color: obj => {
            const { value } = obj;
            return 'yellow';
          },
        },
        data: lines,
      },
      {
        type: 'effectScatter',
        coordinateSystem: 'geo',
        zlevel: 2,
        rippleEffect: {
          //涟漪特效
          period: 4, //动画时间，值越小速度越快
          brushType: 'stroke', //波纹绘制方式 stroke, fill
          scale: 4, //波纹圆环最大限制，值越大波纹越大
        },
        label: {
          show: true,
          position: 'right', //显示位置
          offset: [5, 0], //偏移设置
          formatter: function (params) {
            //圆环显示文字
            return params.name;
          },
          fontSize: 13,
          emphasis: {
            show: true,
          },
        },
        symbol: 'circle',
        symbolSize: function (val) {
          return 10; //圆环大小
        },
        itemStyle: {
          show: false,
          color: obj => {
            const value = obj.value[2];
            return 'yellow';
          },
        },
        data: effectScatter,
      },
      {
        type: 'scatter',
        coordinateSystem: 'geo',
        zlevel: 2,
        rippleEffect: {
          period: 4,
          brushType: 'stroke',
          scale: 4,
        },
        label: {
          show: true,
          position: 'right',
          color: '#0f0',
          formatter: '{b}',
          textStyle: {
            color: '#0f0',
          },
        },
        symbol: 'pin',
        symbolSize: 50,
        data: scatter,
      },
    ],
  };
}
